<template>
  <div class="form1">
    <ep-advance-card title="基础表单" theme="theme-1" class="c1">
      表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。
    </ep-advance-card>
    <ep-advance-card>
      <ep-form ref="form" class="form-container" :form="formData" :rules="rules" name-width="100px" size="normal">
        <ep-form-item label="会议名称：" attr="property1" required>
          <ep-input v-model="formData.property1" name="property1"></ep-input>
        </ep-form-item>
        <ep-form-item label="会议内容：" attr="property2" required>
          <ep-input v-model="formData.property2" name="property2"></ep-input>
        </ep-form-item>
        <ep-form-item label="起止时间：" attr="property3" required>
          <ep-date-range v-model="formData.property3"></ep-date-range>
        </ep-form-item>
        <ep-form-item label="会议地点：" attr="property4" required>
          <ep-select placeholder="请选择" v-model="formData.property4" filterable>
            <ep-select-item v-for="item in selectArr1" :key="item.value" :index="item.value" :label="item.name"></ep-select-item>
          </ep-select>
        </ep-form-item>
        <ep-form-item label="参与者：" attr="property5">
          <ep-muti-select placeholder="请选择" v-model="formData.property5" filterable>
            <ep-select-item v-for="item in selectArr2" :key="item.value" :index="item.value" :label="item.name"></ep-select-item>
          </ep-muti-select>
        </ep-form-item>
        <ep-form-item label="备注：" attr="property6">
          <ep-input v-model="formData.property6" name="property6" type="textarea" :maxlength="300"></ep-input>
        </ep-form-item>
        <ep-form-item label="视频支持" attr="property7" required>
          <ep-radio class="radio" v-model="formData.property7" label="1" name="property7">需要</ep-radio>
          <ep-radio class="radio" v-model="formData.property7" label="0" name="property7">不需要</ep-radio>
        </ep-form-item>
        <ep-form-item>
          <ep-button type="primary" size="normal" @click="submit">提交</ep-button>
          <ep-button type="warning" size="normal" @click="resetForm">重置</ep-button>
        </ep-form-item>
      </ep-form>
    </ep-advance-card>
  </div>
</template>

<script>
export default {
  name: 'form1',
  data() {
    return {
      formData: {
        property1: '',
        property2: '',
        property3: '',
        property4: '',
        property5: '',
        property6: '',
        property7: '1'
      },
      selectArr1: [
        { value: '1', name: '会议室1' },
        { value: '2', name: '会议室2' },
        { value: '3', name: '会议室3' },
        { value: '4', name: '会议室4' },
        { value: '5', name: '会议室5' }
      ],
      selectArr2: [
        { value: '1', name: '刘一' },
        { value: '2', name: '刘二' },
        { value: '3', name: '刘三' },
        { value: '4', name: '刘四' },
        { value: '5', name: '刘五' }
      ],
      rules: {
        property1: { required: true, message: '请输入', trigger: 'change' },
        property2: { required: true, message: '请输入', trigger: 'change' },
        property3: { required: true, message: '请选择', trigger: 'change' },
        property4: { required: true, message: '请选择', trigger: 'change' }
      }
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$pop({
            type: 'success',
            message: '验证通过！'
          })
        }
      })
    },
    resetForm() {
      this.$refs.form.reset()
    }
  }
}
</script>
<style lang="less" scoped>
.form1 {
  .c1 {
    margin-bottom: 15px;
  }
  .form-container {
    width: 450px;
    margin: 0 auto;
  }
  .ep-form--item {
    margin-bottom: 15px;
  }
}
</style>
